<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Vega-Embed for Vega-Lite</title>

    <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
    <script src="build/vega-embed.min.js"></script>
    <style>
      body {
        margin: 0;
      }
      #vis {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <div id="vis"></div>
    <script>
      async function run() {
        const spec = {
          $schema: 'https://vega.github.io/schema/vega-lite/v4.json',
          width: 'container',
          height: 'container',
          data: {
            values: [
              {a: 'A', b: 28},
              {a: 'B', b: 55},
              {a: 'C', b: 43},
              {a: 'D', b: 91},
              {a: 'E', b: 81},
              {a: 'F', b: 53},
              {a: 'G', b: 19},
              {a: 'H', b: 87},
              {a: 'I', b: 52},
            ],
          },
          mark: 'bar',
          encoding: {
            x: {field: 'a', type: 'nominal'},
            y: {field: 'b', type: 'quantitative'},
            tooltip: {field: 'b', type: 'quantitative'},
          },
        };

        const result = await vegaEmbed('#vis', spec, {
          actions: true,
        });

        console.log(result);
      }

      run();
    </script>
  </body>
</html>
